import {
  generateHtml,
  getMarker,
  getTimeAndNumberStr,
  getPrevGroupsStr,
  getCurrentGroupsStr,
  getMaxArrayLength,
  getCurrentCountStr,
  getTheoreticalCountStr
} from '@/utils/study.js'

export const formatterForGroup = function(params) {
  // console.log(params)
  // console.log('原始数据：', params[0].data.sourceData)

  // 当前元素
  const item = params[0]
  // 原数据
  const sourceData = item.data.sourceData
  // 颜色
  const color = item.color
  // 号码
  const number = Number(sourceData.number)
  // 红色
  const currentMarker = getMarker(color)

  // 当前组号码
  const groupsNumber = item.data.groupsNumber
  // 上一组组号码
  const prevGroupsNumber = item.data.prevGroupsNumber

  const chance = item.data.chance

  // 计算HTML容器的宽度
  const numberWidth = 25 // 每个号码占据的宽度（像素）
  const maxArrayLength = getMaxArrayLength(groupsNumber, prevGroupsNumber) // 获取前期和当前组号数组的最大长度
  const width = `${maxArrayLength * numberWidth + 250}px` // 计算最终的宽度，确保内容能够正确显示和布局

  // 生成各部分的HTML
  const components = [
    getTimeAndNumberStr(currentMarker, sourceData.time, number, color),
    getPrevGroupsStr(prevGroupsNumber, number, color),
    getCurrentGroupsStr(groupsNumber, number, color),
    getCurrentCountStr(chance.currentGroupCount),
    getTheoreticalCountStr(chance.theoreticalAverage)
  ]

  // 生成最终HTML
  return generateHtml(components, width)
}
